<template>
  <view class="components-page">
    <!-- 页面标题 -->
    <view class="header bg-white shadow-sm p-4 mb-4">
      <view class="text-2xl font-bold text-center">Vant 组件库</view>
      <view class="text-sm text-gray-500 text-center mt-1">丰富的移动端组件</view>
    </view>

    <!-- 组件分类 -->
    <view class="container">
      <view 
        v-for="category in componentCategories" 
        :key="category.name"
        class="card mb-4"
      >
        <view class="flex items-center justify-between mb-4">
          <view class="text-lg font-semibold">{{ category.name }}</view>
          <view class="text-sm text-gray-500">{{ category.components.length }} 个组件</view>
        </view>
        
        <view class="grid grid-cols-2 gap-3">
          <view 
            v-for="component in category.components" 
            :key="component.name"
            class="component-item"
            @tap="showComponentDemo(component)"
          >
            <view class="text-center">
              <view class="text-2xl mb-2">{{ component.icon }}</view>
              <view class="text-sm font-medium">{{ component.name }}</view>
              <view class="text-xs text-gray-500 mt-1">{{ component.desc }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 组件演示弹窗 -->
    <van-popup 
      v-model:show="showDemo" 
      position="bottom" 
      :style="{ height: '70%' }"
      round
    >
      <view class="demo-popup">
        <view class="demo-header">
          <view class="text-lg font-semibold">{{ currentComponent?.name }}</view>
          <van-icon name="cross" @tap="showDemo = false" />
        </view>
        
        <view class="demo-content">
          <component-demo :component="currentComponent" />
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant'

// 组件分类数据
const componentCategories = ref([
  {
    name: '基础组件',
    components: [
      { name: 'Button', icon: '🔘', desc: '按钮', type: 'button' },
      { name: 'Cell', icon: '📱', desc: '单元格', type: 'cell' },
      { name: 'Icon', icon: '⭐', desc: '图标', type: 'icon' },
      { name: 'Image', icon: '🖼️', desc: '图片', type: 'image' },
      { name: 'Layout', icon: '📐', desc: '布局', type: 'layout' },
      { name: 'Popup', icon: '💬', desc: '弹出层', type: 'popup' }
    ]
  },
  {
    name: '表单组件',
    components: [
      { name: 'Field', icon: '📝', desc: '输入框', type: 'field' },
      { name: 'Checkbox', icon: '☑️', desc: '复选框', type: 'checkbox' },
      { name: 'Radio', icon: '🔘', desc: '单选框', type: 'radio' },
      { name: 'Switch', icon: '🔀', desc: '开关', type: 'switch' },
      { name: 'Slider', icon: '🎚️', desc: '滑块', type: 'slider' },
      { name: 'Stepper', icon: '🔢', desc: '步进器', type: 'stepper' }
    ]
  },
  {
    name: '反馈组件',
    components: [
      { name: 'Toast', icon: '🍞', desc: '轻提示', type: 'toast' },
      { name: 'Dialog', icon: '💭', desc: '弹出框', type: 'dialog' },
      { name: 'Notify', icon: '📢', desc: '消息通知', type: 'notify' },
      { name: 'Loading', icon: '⏳', desc: '加载', type: 'loading' },
      { name: 'Overlay', icon: '🌫️', desc: '遮罩层', type: 'overlay' },
      { name: 'PullRefresh', icon: '🔄', desc: '下拉刷新', type: 'pull-refresh' }
    ]
  },
  {
    name: '展示组件',
    components: [
      { name: 'Badge', icon: '🏷️', desc: '徽标', type: 'badge' },
      { name: 'Tag', icon: '🏷️', desc: '标签', type: 'tag' },
      { name: 'Progress', icon: '📊', desc: '进度条', type: 'progress' },
      { name: 'Circle', icon: '⭕', desc: '环形进度条', type: 'circle' },
      { name: 'Skeleton', icon: '💀', desc: '骨架屏', type: 'skeleton' },
      { name: 'Empty', icon: '📭', desc: '空状态', type: 'empty' }
    ]
  },
  {
    name: '导航组件',
    components: [
      { name: 'NavBar', icon: '🧭', desc: '导航栏', type: 'nav-bar' },
      { name: 'Tabbar', icon: '📱', desc: '标签栏', type: 'tabbar' },
      { name: 'Tab', icon: '📑', desc: '标签页', type: 'tab' },
      { name: 'Sidebar', icon: '📋', desc: '侧边导航', type: 'sidebar' },
      { name: 'Steps', icon: '👣', desc: '步骤条', type: 'steps' },
      { name: 'IndexBar', icon: '🔤', desc: '索引栏', type: 'index-bar' }
    ]
  },
  {
    name: '业务组件',
    components: [
      { name: 'AddressEdit', icon: '📍', desc: '地址编辑', type: 'address-edit' },
      { name: 'ContactCard', icon: '👤', desc: '联系人卡片', type: 'contact-card' },
      { name: 'Coupon', icon: '🎫', desc: '优惠券', type: 'coupon' },
      { name: 'GoodsAction', icon: '🛒', desc: '商品导航', type: 'goods-action' },
      { name: 'SubmitBar', icon: '💰', desc: '提交订单栏', type: 'submit-bar' },
      { name: 'Sku', icon: '📦', desc: '商品规格', type: 'sku' }
    ]
  }
])

// 弹窗状态
const showDemo = ref(false)
const currentComponent = ref(null)

/**
 * 显示组件演示
 * @param component 组件信息
 */
const showComponentDemo = (component: any) => {
  currentComponent.value = component
  showDemo.value = true
  
  // 显示提示
  showToast({
    message: `查看 ${component.name} 组件演示`,
    position: 'top'
  })
}
</script>

<style lang="scss" scoped>
.components-page {
  min-height: 100vh;
  background: #f8fafc;
}

.component-item {
  @apply bg-gray-50 p-4 rounded-lg border border-gray-200;
  transition: all 0.3s ease;
  
  &:hover {
    @apply bg-primary-50 border-primary-200;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.demo-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.demo-header {
  @apply flex items-center justify-between p-4 border-b border-gray-200;
}

.demo-content {
  flex: 1;
  @apply p-4 overflow-y-auto;
}

// 组件演示样式
.component-demo {
  @apply space-y-4;
}
</style>
